
var textOnTop   = 1;
var gameIndex   = 0;
var pageIndex   = 0;
var gameMax;
var pageMax;

//$(window).load(function()
$(window).load(function()  //$(document).ready(function()
{
    //setup the drawing canvas
    initFinishPage();
});


// Init initial view
initFinishPage();



function initFinishPage()
{
    //var numGames;
    var currentStory;          	            //story text area
    var currentDrawing;
    var maxHeight;
    //var finishedGameIDs     = newArray;
    //var finishedGameIcons   = newArray;     //Icons to display in left area
    //var currentDrawings     = newArray;     //
    //var currentStories      = newArray;

    // Load objects into variables
    
    // Story Text Area
    currentStory    = $("#current_text");
    
    // Picture area
    currentDrawing  = $("#current_picture");
    
    // Buttons
    rightButton     = $("#ButtonRight");
    leftButton      = $("#ButtonLeft");
    
    //Set size of divs
    maxHeight       =  $("#CurrentGame").height();
    $("#AllGames").height(maxHeight);
    $("#AllPlayers").height(maxHeight);
    $("#ButtonRight").height(maxHeight);
    $("#ButtonLeft").height(maxHeight);
    //$("#CurrentGame").sortable();

    
    //$(window).height();   // returns height of browser viewport
    //$(document).height(); // returns height of HTML document

    
    // Load content from john
    /*
    numGames            = ;
    finishedGameIDs     = ;
    finishedGameIcons   = ;     
    currentDrawings     = ;     
    currentStories      = ;
    currentGameIndex    = 1;
    */
    loadAllGames();
    
    textOnTop   = 1;
    gameIndex   = 0;
    gameMax     = 5;
    pageIndex   = 0;
    pageMax     = 10;
    
    // Display content
    // Load value to story
    currentStory.val("It's working!!!");
    //currentStory.value    = currentStories[currentGameIndex];
    //currentDrawings.value = currentDrawings[currentGameIndex];
    
    
    // Create event listeners for scroll buttons    
    rightButton.bind('click', viewNext);
    leftButton.bind('click', viewPrevious);
    
    //Create event listeners for game icons
    
    
    
}


// -----------------------------------------------------
// function viewNext()
// View next drawing or picture, slide bottom one up
// -----------------------------------------------------
function viewNext()
{
    if (pageIndex >= pageMax) return;
    pageIndex++;
    
    // Text Area
    var currentStory    = $("#current_text");
    
    // Picture area
    var currentDrawing  = $("#current_picture");
    
    var topDiv;
    var bottomDiv;
    
    // Load divs based on current set up
    if ( textOnTop )
    {
        topDiv      = $("#TopScroll");
        bottomDiv   = $("#BottomScroll");
    } else
    {
        topDiv      = $("#BottomScroll");
        bottomDiv   = $("#TopScroll");      
    }
    
    topDiv.fadeTo(300, 0.01, function() { });
    // Slide top up
    topDiv.slideToggle(250, function() {
        // Animation complete.
    
        // Load next writing or drawing
        if (textOnTop)  {currentStory.val("Next story..");}     // load text
        else            {currentDrawing.val('resources/images/test3.png');} // load drawing
        
        // 
        $("#CurrentGame").empty();           
        $("#CurrentGame").append(bottomDiv);
        $("#CurrentGame").append(topDiv);
        topDiv.slideToggle(0, function() {});
        topDiv.fadeTo(300, 1, function() { });
    });
    
    
    textOnTop = !textOnTop;  
    
}

// -----------------------------------------------------
// function viewPrevious()
// View previous drawing or picture, slide new top div down
// -----------------------------------------------------
function viewPrevious()
{
    
    if (pageIndex == 0) return;
    pageIndex--;
    
    // Text Area
    var currentStory    = $("#current_text");
    
    // Picture area
    var currentDrawing  = $("#current_picture");
    
    var topDiv;
    var bottomDiv;
    
    // Load divs based on current set up
    if ( textOnTop )
    {
        topDiv      = $("#TopScroll");
        bottomDiv   = $("#BottomScroll");
    } else
    {
        topDiv      = $("#BottomScroll");
        bottomDiv   = $("#TopScroll");
        
    }

    //bottomDiv.hide();
    bottomDiv.fadeTo(250, 0.05, function() {
        // Load next writing or drawing
       if (!textOnTop) {currentStory.val("Previous story..");}     // load text
       else            {currentDrawing.val('resources/images/test3.png');      }                                   // load drawing
       
       $("#CurrentGame").empty();           
       $("#CurrentGame").append(bottomDiv);
       $("#CurrentGame").append(topDiv);
       bottomDiv.slideDown(500,function(){
            bottomDiv.fadeTo(250, 1, function() { });    
       });
    });

    textOnTop = !textOnTop;    
    
}



        
//-----------------------------------
// function: loadAllGames()
// task: Load icons/names for a particular series of games
//-----------------------------------
function loadAllGames()
{
    // load the total number of games
    var numGames    = 5;
    var icon;
    var iconName;
    var n;
    // load games ID
    
    
    for (n = 0; n < numGames; n++)
    {
        // load games icon/name
        
        // load new item into allGames Div
        $("#AllGames").append('<p>Test</p>')
    }
}

//-----------------------------------
// function: loadGame()
// task: Load all images and text for 1 particular game so that user can scroll through them on resultPage
//-----------------------------------
function loadGame()
{
    // Text Area
    var currentStory    = $("#current_text");
    
    // Picture area
    var currentDrawing  = $("#current_picture");
    
    // Load text and images
    
    // fade in first text and image
    
}



